<!--
 * @Author: chunlai
 * @Date: 2023-12-12 10:11:57
 * @LastEditTime: 2025-11-27 15:09:08
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\InsureBillInfos.vue
 * @Description: 保单相关信息
-->
<template>
  <div class="step_bill_module">
    <div class="topSec">
      <div class="form-head-name">保单信息</div>
    </div>
    <InsEffectiveDate v-if="effectiveDate == '1'" />
    <van-field
      label="缴费方式"
      class="refpayMode"
      readonly
      input-align="right"
      error-message-align="right"
      v-if="isShortInsure"
    >
      <div slot="input">
        <!-- 按年付款|(一次性付款) -->
        <span class="btn_text">一次交清</span>
      </div>
    </van-field>
    <template v-if="unifyRenew != '0'">
      <van-field
        label="开通自动延续保障服务"
        class="refrenewFlag"
        readonly
        label-width="170px"
        input-align="right"
        error-message-align="right"
        v-if="infoReg.hasOwnProperty('renewFlag')"
      >
        <div slot="input">
          <MsRadio
            :curVal="orderInfo.renewFlag"
            btnType="renewFlag"
            :arrList="renewList"
            @clickEvent="changeRadio"
          />
        </div>
      </van-field>
      <div class="xubao_warn_box">
        <div class="xubao_warn" v-if="orderInfo.renewFlag == '-2'">
          <h3>不开通的风险</h3>
          <ul>
            <li class="tips-item">
              <span class="un_handle"></span>
              <span class="warn-text">
                <b>脱保风险</b>：每天都有客户因忘记缴费而失去保障。
              </span>
            </li>
            <li class="tips-item">
              <span class="un_handle"></span>
              <span class="warn-text">
                <b>无法理赔</b>：断保后再次投保，等待期内出险将无法理赔。
              </span>
            </li>
            <li class="tips-item">
              <span class="un_handle"></span>
              <span class="warn-text">
                <b>拒保风险</b
                >：断保后再次投保，需重新审核健康状况，不符合要求将被拒保。
              </span>
            </li>
          </ul>
        </div>
        <div class="xubao_warn is_kt" v-else>
          <h3>开通后可享受</h3>
          <ul>
            <li class="tips-item">
              <span class="in_handle"></span>
              <span class="warn-text">
                <b>省心</b>：每年保费将自动从您授权的账户扣款，延续保障。
              </span>
            </li>
            <li class="tips-item">
              <span class="in_handle"></span>
              <span class="warn-text">
                <b>安心</b>：不用担心忘记缴费导致保障中断。
              </span>
            </li>
            <li class="tips-item">
              <span class="in_handle"></span>
              <span class="warn-text"> <b>放心</b>：开通后可随时取消。 </span>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="orderInfo.renewFlag == '-1' && renewBank == '1'">
        <van-field
          label="扣款方式"
          class="refexpayMode"
          readonly
          input-align="right"
          error-message-align="right"
        >
          <div slot="input">
            <MsRadio
              :curVal="orderInfo.expayMode"
              btnType="expayMode"
              labelName="text"
              valueName="keyId"
              :arrList="kkfsList"
              @clickEvent="changeRadio"
            />
          </div>
        </van-field>
        <!-- 银行卡信息 -->
        <template v-if="orderInfo.expayMode == '2'">
          <!-- 账号名 -->
          <van-field
            label="银行户名（投保人）"
            class="refbankAccName"
            :value="orderInfo.bankAccName"
            label-width="180px"
            :readonly="true"
            placeholder=""
            input-align="right"
            error-message-align="right"
            v-if="
              infoReg.hasOwnProperty('bankAccName') && orderInfo.bankAccName
            "
          />
          <!-- 缴费银行 -->
          <van-field
            label="开户银行"
            class="refbankCode"
            :value="orderInfo.bankName"
            @click="
              tipsInfo.bankCode = '';
              showPopAction('picker', 'bankCode', bankList, orderInfo.bankCode);
            "
            input-align="right"
            error-message-align="right"
            readonly
            placeholder="请选择"
            :error-message="tipsInfo.bankCode"
            v-if="infoReg.hasOwnProperty('bankCode')"
          >
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
          <!-- 银行账号 -->
          <van-field
            label="银行卡号"
            class="refbankAccNo"
            v-model="orderInfo.bankAccNo"
            :error-message="tipsInfo.bankAccNo"
            @click="tipsInfo.bankAccNo = ''"
            type="number"
            maxlength="21"
            clearable
            clear-trigger="always"
            input-align="right"
            error-message-align="right"
            placeholder="请输入"
            v-if="infoReg.hasOwnProperty('bankAccNo')"
          >
          </van-field>
          <!-- 预留手机号 -->
          <van-field
            class="reffirBankMobile"
            v-model="orderInfo.firBankMobile"
            @focus="tipsInfo.firBankMobile = ''"
            :error-message="tipsInfo.firBankMobile"
            type="number"
            maxlength="11"
            clearable
            label-width="170px"
            clear-trigger="always"
            input-align="right"
            error-message-align="right"
            placeholder="请输入"
            v-if="infoReg.hasOwnProperty('firBankMobile')"
          >
            <div slot="label" class="flexlabel">
              <span class="mr5">预留手机号</span>
              <div
                class="same_to_btn"
                :class="sameAppntForPhone ? 'is_same_res' : ''"
                @click.stop="sameToAppnt($event, 'firBankMobile')"
              >
                同投保人
              </div>
            </div>
          </van-field>
          <div class="show-tips">
            银行预留手机号是您在办理银行卡时使用的手机号码。如预留手机号已遗忘或失效，您可联系银行客服处理。
          </div>
          <div class="kk_xy" @click="toReadPop" v-if="autoRenewNotice.fileUrl">
            <van-checkbox
              :value="tickCheck"
              shape="square"
              checked-color="#ee0a24"
              icon-size="14px"
              style="margin-right: 10px; margin-top: 1px"
            >
            </van-checkbox>
            我已阅读并同意<span>
              {{ autoRenewNotice.fileName }}
            </span>
          </div>
        </template>
      </div>
    </template>

    <van-popup
      v-model="showPop"
      overlay-class="lay1_shark"
      round
      position="bottom"
      v-if="showPop"
    >
      <van-picker
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirmPick"
        @cancel="showPop = false"
        :default-index="defaultIndex"
      >
        <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
    </van-popup>
    <FileReadingPop
      ref="fileRenewRef"
      btnText="我已阅读并同意"
      @close="closeRead"
      v-if="showRead"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FileReadingPop from "@/components/FileReadingPop";
import InsEffectiveDate from "./InsEffectiveDate";
import { validBillInfo } from "@/translate/validate/customer";
import { getBankCardInfos } from "@/utils/functions";
import { accountCodeFormat, tellPhoneFormat } from "@/methods/format.js";

export default {
  name: "InsureBillInfos",
  components: { FileReadingPop, InsEffectiveDate },
  data() {
    return {
      defaultIndex: 0,
      showRead: false,
      showPop: false,
      foI3: false,
      foI4: false,
      popConfig: {
        list: [],
      },
      keyWord: "", //关键字查询
      orderInfo: {
        printPolType: "",
        totalPrem: "",
        bankCode: "",
        bankName: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
        expayMode: "",
        renewFlag: "",
        smsFlag: "",
        bnfBankCode: "", // 存放平安的银行分行编码
      },
      tipsInfo: {
        printPolType: "",
        totalPrem: "",
        bankCode: "",
        bankName: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
        expayMode: "",
        renewFlag: "",
      },
      pageLoad: false,
      tickCheck: false,
    };
  },
  computed: {
    ...mapGetters({
      unifyRenew: "page/unifyRenew",
      renewBank: "page/renewBank",
      apiGetBanks: "page/apiGetBanks",
      autoRenewNotice: "page/autoRenewNotice",
      bankList: "dictionary/bankList",
      payInfo: "insert/payInfo",
      kkfsList: "dictionary/kkfsList",
      renewList: "dictionary/renewList",
      applicant: "insert/applicant",
      inputReg: "infoReg/inputReg",
      totalPrem: "insert/totalPrem",
      mainInsu: "risks/mainInsu",
      effectiveDate: "page/effectiveDate",
    }),
    isShortInsure() {
      let res = true;
      if (
        this.mainInsu[0].payendyearArr &&
        this.mainInsu[0].payendyearArr.length > 0
      ) {
        res = false;
      }
      return res;
    },
    infoReg() {
      let res = JSON.parse(JSON.stringify(this.inputReg.payInfo));
      return res;
    },
    viewOptions() {
      return this.popConfig.list.filter(
        (item) => item.text && item.text.indexOf(this.keyWord) !== -1
      );
    },
    cpPhoneNum: {
      get: function () {
        if (this.foI4) {
          return this.orderInfo.firBankMobile;
        }
        return tellPhoneFormat(this.orderInfo.firBankMobile);
      },
      set: function (val) {
        this.changeData({
          firBankMobile: val.replace(/\s*/g, ""),
        });
      },
    },
    cpAcctNum: {
      get: function () {
        if (this.foI3) {
          return this.orderInfo.bankAccNo;
        }
        return accountCodeFormat(this.orderInfo.bankAccNo);
      },
      set: function (val) {
        this.changeData({
          bankAccNo: val.replace(/\s*/g, ""),
        });
      },
    },
    sameAppntForPhone() {
      let res = false;
      if (this.orderInfo.firBankMobile == this.applicant.phone) {
        res = true;
      }
      return res;
    },
  },
  watch: {
    orderInfo: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$store.commit("insert/UPDATE_PAYINFO", val);
        }
      },
      deep: true,
    },
    "applicant.name": {
      handler: function (val) {
        if (this.pageLoad) {
          if (val) {
            this.orderInfo.bankAccName = val;
          }
        }
      },
      deep: true,
    },
  },
  created() {
    this.orderInfo = this.payInfo;
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  mounted() {},
  methods: {
    saveForm() {
      /*=== 特殊校验 ===*/
      // 授权阅读
      if (
        this.unifyRenew != "0" &&
        this.orderInfo.renewFlag == "-1" &&
        this.renewBank == "1" &&
        this.orderInfo.expayMode == "2" &&
        this.autoRenewNotice.fileUrl
      ) {
        if (!this.tickCheck) {
          this.$toast("请仔细阅读以上协议");
          return { status: false };
        }
      }
      // 校验+提交
      let res = validBillInfo(this.infoReg, this.orderInfo, this.unifyRenew);
      if (res.status == false) {
        let id = "ref" + res.target;
        let target = document.querySelector(id);
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$toast(res.msg);
      }
      return res;
    },
    changeRadio(item, type) {
      let obj = {};
      const keyValue = item.keyId || item.value;
      obj[type] = keyValue;
      this.changeData(obj);
      if (type === "payMode") {
        // 判断已选择的银行是否在 对应的缴费方式中
        if (this.orderInfo.bankCode) {
          let target = this.bankList.find(
            (item) => item.keyId == this.orderInfo.bankCode
          );
          // 未找到对应的银行 置空
          if (!target) {
            this.orderInfo.bankName = "";
            this.orderInfo.bankCode = "";
            this.orderInfo.bankAccNo = "";
          }
        }
      }
    },
    onConfirmPick(value) {
      if (this.popConfig.key == "bankCode") {
        this.changeData({
          bankCode: value.keyId,
          bankName: value.text,
        });
        if (value.subBranchCode) {
          this.changeData({
            bnfBankCode: value.subBranchCode,
          });
        }
      }
      this.showPop = false;
    },
    closeRead() {
      this.tickCheck = true;
      this.showRead = false;
    },
    toReadPop() {
      this.showRead = true;
      this.$nextTick(() => {
        this.$refs.fileRenewRef.initModule(this.autoRenewNotice);
      });
    },
    sameToAppnt(event, type) {
      if (event) event.preventDefault();
      if (type == "firBankMobile") {
        this.changeData({
          firBankMobile: !this.sameAppntForPhone ? this.applicant.phone : "",
        });
      }
    },
    changeData(data) {
      Object.assign(this.orderInfo, data);
      this.$forceUpdate();
    },
    async showPopAction(type, key, list, curVal) {
      this.defaultIndex = 0;
      let pickerOptions = list;
      if (this.apiGetBanks == "1") {
        this.$store.commit("updateLoad", true);
        let res = await getBankCardInfos(this.apiComParams);
        this.$store.commit("updateLoad", false);
        if (
          res.result == "1" &&
          res.data &&
          res.data.code &&
          res.data.code == "1"
        ) {
          pickerOptions = res.data.data;
        } else {
          this.$toast(res.data.msg);
          return;
        }
      }
      this.popConfig = {
        type,
        key,
        list: pickerOptions,
      };
      if (pickerOptions.length > 0) {
        let defIndex = pickerOptions.findIndex(
          (item) => curVal == item.keyId || item.default
        );
        if (defIndex > 0) {
          this.defaultIndex = defIndex;
        }
      }
      // console.log(this.popConfig);
      this.showPop = true;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";

.show-tips {
  width: 100%;
  line-height: 1.5;
  padding: 8px 14px;
  font-size: 12px;
  background-color: #fdfaf3;
  color: #e7a249;
}
.xubao_warn_box {
  background: #fff;
  padding: 8px 16px;

  .xubao_warn {
    color: #666;
    font-size: 13px;
    padding: 10px 0 10px 14px;
    background-color: #f5f5f5;
    border-radius: 8px;
    &.is_kt {
      font-size: 15px;
      color: #994903;
      background-color: #faf2ed;
    }
    h3 {
      font-weight: 600;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
    }
    .tips-item {
      display: flex;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 20px;
      margin-top: 10px;
      .warn-text {
        width: calc(100% - 21px);
      }
    }
  }
}
.kk_xy {
  display: flex;
  font-size: 13px;
  margin-top: 10px;
  padding-left: 12px;
  span {
    color: #2196f3;
  }
}
.refrenewFlag {
  /deep/.van-field__label {
    display: flex;
    align-items: center;
  }
}
.un_handle {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  margin-right: 4px;
  background: url("")
    no-repeat;
  background-size: 100% 100%;
}
.in_handle {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  margin-right: 4px;
  background: url("")
    no-repeat;
  background-size: 100% 100%;
}
</style>
